<!--该弹窗是用于更改质保周期，所以只有总部才能显示这个弹窗-->
<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import { FormInstance } from 'element-plus'
  import { useUpdateWarrantyRange } from '@/services/pages/code/useCode'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import moment from 'moment'

  const { updateForm, updateLoading, update, resetForm } = useUpdateWarrantyRange()

  defineOptions({
    name: 'CodeUpdateWarrantyDateRangeModal',
  })

  const props = defineProps({
    codeIds: {
      type: Array as PropType<Array<string>>,
      required: true,
    },
    warrantyStartDate: {
      type: String,
      default: () => '',
    },
    warrantyEndDate: {
      type: String,
      default: () => '',
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 表单校验规则
  const rules = {
    newStartTime: [{ required: true, message: '请选择质保开始日期', trigger: ['blur', 'change'] }],
    newEndTime: [{ required: true, message: '请选择质保开始日期', trigger: ['blur', 'change'] }],
  }

  // 表单组件实例
  const formInstance = ref<FormInstance | null>(null)

  /**
   * 隐藏弹窗
   */
  const hideDialog = () => {
    visible.value = false
    resetForm()
  }

  /**
   * 申请点击事件
   */
  const onApply = async () => {
    if (formInstance.value) {
      try {
        await formInstance.value.validate()
        updateForm.value.warrantyStartDate = moment(updateForm.value.warrantyStartDate).format(
          'YYYY-MM-DD HH:mm:ss',
        )
        updateForm.value.warrantyEndDate = moment(updateForm.value.warrantyEndDate).format(
          'YYYY-MM-DD HH:mm:ss',
        )
        const res = await update()
        if (res.code === 20000) {
          HMessage.success('申请成功')
          emits('update')
          hideDialog()
          return
        }
        HMessageBox.error(res.message)
      } catch (error) {
        // error
      }
    }
  }

  watch(visible, (value) => {
    if (value && props.codeIds.length >= 1) {
      updateForm.value.id = props.codeIds[0]
      updateForm.value.ids = props.codeIds
      if (props.warrantyEndDate) {
        updateForm.value.warrantyEndDate = props.warrantyEndDate
        updateForm.value.warrantyStartDate = props.warrantyStartDate
      }
    }
  })
</script>

<template>
  <h-dialog v-model="visible" title="变更质保周期" :loading="updateLoading" @close="hideDialog">
    <el-form
      ref="formInstance"
      :model="updateForm"
      inline-message
      label-position="top"
      :rules="rules"
      class="modal_form_content"
    >
      <!--质保开始日期-->
      <el-form-item prop="warrantyStartDate" label="质保开始日期">
        <el-date-picker v-model="updateForm.warrantyStartDate" placeholder="请选择质保开始日期" />
      </el-form-item>

      <!--质保结束日期-->
      <el-form-item prop="warrantyEndDate" label="质保结束日期">
        <el-date-picker v-model="updateForm.warrantyEndDate" placeholder="请选择质保结束日期" />
      </el-form-item>
    </el-form>

    <template #footer>
      <h-button type="primary" is-modal @click="onApply">保存</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss">
  :deep(.el-input) {
    width: 100%;
  }
</style>
